
//   友情链接列表展示
$(function () {
  function db() {
    let data = ''
    $.ajax({
      type: "GET",
      url: "/admin/links",
      success: function (res) {
        if (res.status == 0) {
          // console.log(res);
          let str = ''
          res.data.forEach(item => {

            str += `
                  <tr>
                  <td>${item.id}</td>
                  <td>
                    <div class="bg">
                      <img src="http://localhost:8888/uploads/${item.linkicon}" >
                    </div>
                  </td>
                  <td>${item.linkname}</td>
                  <td>${item.linkurl}</td>
                  <td>${item.linkdesc}</td>
                  <td>
                    <button data-linkname="${item.linkname}" data-linkurl="${item.linkurl}"  data-linkdesc="${item.linkdesc}"  data-id="${item.id}"   "   " type="button" class="layui-btn layui-btn-xs edit">
                      编辑
                    </button>
                    <button data-id="${item.id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">
                      删除
                    </button>
                  </td>
                </tr> 
                  
                  `
          })
          $('.layui-table tbody').html(str)

        }
      }

    });
  }
  db()
  let add_str = `
  <form id="add-form" class="layui-form" style="margin: 15px 30px 0 0"  lay-filter="abc">
        
        <div class="layui-form-item">
          <label class="layui-form-label">链接名称</label>
          <div class="layui-input-block">
            <input type="text" name="linkname" required  lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input">
          </div>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label">链接地址</label>
          <div class="layui-input-block">  
            <input type="text" name="linkurl" required|url  lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
          </div>
        </div>
       
        <div class="layui-form-item">
          <label class="layui-form-label">链接描述</label>
          <div class="layui-input-block">
            <input type="text" name="linkdesc" required  lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input">
          </div>
        </div>
        
        <div class="layui-form-item">
          <div class="layui-input-block icon-url">
            <button type="button" class="layui-btn layui-btn-sm" id="urlIcon">
              <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
            <input type="file" name="linkicon" id="linkFile" style="display: none;">
            <img id="preIcon" src="">
          </div>
        </div>
        <!-- 第三行：按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
  `
  let form = layui.form

  // 友情链接编辑

  $('.layui-table tbody').on('click', '.edit', function (e) {
    let Id = $(this).attr('data-id')
    let linkname = $(this).attr('data-linkname')
    let linkurl = $(this).attr('data-linkurl')
    let linkdesc = $(this).attr('data-linkdesc')
    // let ha = $('#preIcon').attr('src', 'http://localhost:8888/uploads/' + linkicon)
    let index = layer.open({
      type: 1,
      content: add_str,
      title: '添加类别',
      area: ['500px', '350px'],
    });
    form.val("abc", {
      linkname: linkname,
      linkurl: linkurl,
      Id: Id,
      linkdesc: linkdesc,
      // linkicon: ha
    });

    $('#urlIcon').click(function () {
      $('#linkFile').click()
    })
    // $('#add-form').on('change', '#linkFile', function (e) {
    //   const objectURL = URL.createObjectURL(e.target.files[0])
    //   $('#preIcon').attr('src', objectURL)
    // })
    $('#add-form').on('submit', function (e) {
      e.preventDefault();
      var fd = new FormData(this)
      var id = $(e.target).data('id')
      $.ajax({
        url: '/admin/links/' + id,
        type: 'PUT',
        data: fd,
        processData: false,
        contentType: false,
        success: function (res) {
          console.log(res);
          layer.msg(res.message)
          // $('#preIcon').attr('src', 'http://localhost:8888/uploads/' + linkicon)
          // delete linkicon
          // form.val('editForm', res.data)

          // 绑定文件上传按钮点击事件
          $('#urlIcon').click(function () {
            $('#linkFile').click()
          })
          // 监听文件选中事件
          // let file = null
          // $('#linkFile').change(function (e) {
          //   const objectURL = URL.createObjectURL(e.target.files[0])
          //   file = e.target.files[0]
          //   $('#preIcon').attr('src', objectURL)
          // })
          if (res.status == 0) {
            db()
            layer.close(index)
          }
        }
      })
    })


  })








  // 添加链接


  $('.add').click(function () {
    let index = layer.open({
      type: 1,
      content: add_str,
      title: '添加类别',
      area: ['500px', '350px'],
    });
    $('#urlIcon').click(function () {
      $('#linkFile').click()
    })
    $('#linkFile').change(function (e) {
      const objectURL = URL.createObjectURL(e.target.files[0])
      $('#preIcon').attr('src', objectURL)
    })
    $('#add-form').on('submit', function (e) {
      e.preventDefault();
      var fd = new FormData(this)
      $.ajax({
        url: '/admin/links',
        type: 'post',
        data: fd,
        processData: false,
        contentType: false,
        success: function (res) {
          layer.msg(res.message)
          if (res.status == 0) {
            db()
            layer.close(index);
          }
        }
      })
    })
  })








  // 友情链接删除
  // 
  let layer = layui.layer
  $('tbody').on('click', '.layui-btn-danger', function () {
    layer.confirm('你真的舍得删人家吗', (index) => {
      let id = $(this).attr('data-id')
      $.ajax({
        url: '/admin/links/' + id,
        type: 'DELETE',
        success: function (res) {
          layer.msg(res.message)
          if (res.status == 0) {



            db()

          }
        }
      })
    })
  })




})
